import React from "react";
import {makeStyles} from "@rn-vui/themed";
import {Pressable, StyleSheet, Text, View} from "react-native";

const useStyles = makeStyles((theme) => ({
    container: {
        padding: theme.spacing.md,
        borderBottomWidth: StyleSheet.hairlineWidth,
        borderBlockColor: theme.colors.grey4,
        flexDirection: 'row',
    },
    orderItems: {
        width: '50%',
    },
    orderItem: {
        rowGap: 5,
    },
    orderItemTitle: {
        fontWeight: 'bold',
        color: theme.colors.orange
    },
    orderItemOptionTitle: {
        color: theme.colors.white,
        fontSize: 13,
    },
    orderInfo: {
        flexGrow: 1
    },
    orderCode: {
        color: theme.colors.white,
        fontSize: 20,
        fontWeight: 'bold',
    },
    orderShippingMethodTitle: {
        color: theme.colors.orange,
        fontSize: 18,
        fontWeight: 'bold'
    },
    orderShipping: {
        rowGap: 2,
        marginTop: 10
    },
    shippingName: {
        color: theme.colors.white,
        fontSize: 18,
    },
    shippingText: {
        color: theme.colors.white,
        fontSize: 16,
    }
}));

interface OrderListItemProps {
    order: any;
    onPress?: (order: any) => void;
}

const ItemOptions = () => {
    return (
        <View>
            <Text>Option</Text>
        </View>
    )
}

const OrderListItem = (props: OrderListItemProps) => {
    const styles = useStyles();
    const {order} = props;

    const renderOptions = React.useCallback((options: any[]) => {
        if (!Array.isArray(options)) {
            return null;
        }

        return options.filter((option: any) => {
            const value = option.value ? option.value : option;
            return !(/none/i.test(value) || /original/i.test(value));
        }).map((option: any, index: number) => (
            <View style={{flexDirection: 'row'}} key={'option_' + index}>
                <Text style={{color: '#fff'}}>--</Text>
                <Text style={styles.orderItemOptionTitle}>{option.value ? option.value : option}</Text>
            </View>
        ));
    }, [styles.orderItemOptionTitle]);

    const renderComments = React.useCallback((comments: any[]) => {
        if (comments) {
            return Array.from([...comments]).map((comment: any, index: number) => (
                <View style={{flexDirection: 'row'}} key={'option_' + index}>
                    <Text style={{color: '#fff'}}>--</Text>
                    <Text style={styles.orderItemOptionTitle}>{comment.type + '-' + comment.name}</Text>
                </View>
            ))
        }
        return null;
    }, [styles.orderItemOptionTitle]);

    return (
        <Pressable style={styles.container} onPress={() => props.onPress?.(props.order)}>
            <View style={styles.orderItems}>
                {
                    order.items.map((item: any, index: number) => (
                        <View style={styles.orderItem} key={'item_' + index}>
                            <Text style={styles.orderItemTitle}>{item.quantity + '*' + item.title}</Text>
                            {renderOptions(Object.values(item.variations))}
                            {renderOptions(item.options)}
                            {renderComments(item.comments)}
                        </View>
                    ))
                }
            </View>
            <View style={styles.orderInfo}>
                <Text style={styles.orderCode}>{order.short_code}</Text>
                <Text style={styles.orderShippingMethodTitle}>{order.shipping_method_title}</Text>
                <View style={styles.orderShipping}>
                    <Text style={styles.shippingName}>{order.shipping?.first_name}</Text>
                    <Text style={styles.shippingText}>{order.shipping?.phone_number}</Text>
                    <Text style={styles.shippingText}>{order.shipping?.formatted_address}</Text>
                </View>
            </View>
        </Pressable>
    );
};

export default React.memo(OrderListItem);
